<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改电影</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!-- 修改电影的表单 -->
    <el-form
      style="width: 600px"
      label-width="120px"
      :model="form"
      ref="form"
      :rules="rules"
    >
      <el-form-item label="封面图片" prop="cover">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9000/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.cover" :src="form.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="电影类别" prop="category_id">
        <el-radio :label="1" v-model="form.category_id">热映</el-radio>
        <el-radio :label="2" v-model="form.category_id">待映</el-radio>
        <el-radio :label="3" v-model="form.category_id">经典</el-radio>
      </el-form-item>
      <el-form-item label="电影名称" prop="title">
        <el-input placeholder="请输入内容" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="电影类型" prop="type">
        <el-select
          multiple
          placeholder="请选择"
          v-model="form.type"
          style="width: 100%"
        >
          <el-option
            v-for="item in types"
            :key="item.id"
            :label="item.typename"
            :value="item.typename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电影主演" prop="star_actor">
        <el-select
          style="width: 100%"
          v-model="form.star_actor"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in actors"
            :key="item.id"
            :label="item.actor_name"
            :value="item.actor_name"
            style="width: 100%"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上映时间" prop="showingon">
        <el-date-picker
          style="width: 100%"
          v-model="form.showingon"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="电影评分" prop="score">
        <el-input type="text" v-model="form.score"></el-input>
      </el-form-item>
      <el-form-item label="电影时长" prop="duration">
        <el-input type="text" v-model="form.duration"></el-input>
      </el-form-item>
      <el-form-item label="电影简介" prop="description">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="form.description"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      actors: [], //保存模糊查询后的演员列表
      loading: false, //表示下拉列表是否正在加载
      types: [], //保存所有电影类型
      form: {
        id: this.$route.params.id, // 获取列表页传过来的参数：电影id
        // 保存当前表单收集到的数据
        category_id: "1", //类别ID
        cover: "",
        title: "",
        type: [],
        star_actor: [],
        showingon: "",
        score: "",
        description: "",
        duration: "",
      },
      rules: {
        category_id: [
          { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
        cover: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        title: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "该字段不能为空", trigger: "change" },
        ],
        star_actor: [
          { required: true, message: "该字段不能为空", trigger: "change" },
        ],
        showingon: [
          { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
        score: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        description: [
          { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
        duration: [
          { required: true, message: "该字段不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submit() {
      // //处理form中的字段,改为服务端需要的格式
      this.form.star_actor = this.form.star_actor.join("／");
      this.form.type = this.form.type.join("／");
      this.form.actors = undefined;
      this.form.director = undefined;
      this.form.thumb = undefined;
      console.log(this.form);
      // 验证表单是否符合rules的要求
      this.$refs["form"].validate((valid) => {
        if (valid) {
          httpApi.movieApi.update(this.form).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("更新成功");
              this.$router.push("/home/movie-list");
            }
          });
        }
      });
    },
    // 当在el-select中输入内容,需要异步搜索演员时执行
    remoteMethod(query) {
      console.log(query);
      httpApi.actorApi.queryActorsByName({ name: query }).then((res) => {
        this.form = res.data.data;
      });
    },
    // 将云存储返回的图片地址赋值
    handleAvatarSuccess(res, file) {
      this.form.cover = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 初始化电影列表类型 更新下拉列表框
    initMovieTypes() {
      httpApi.movieApi.queryTypes().then((res) => {
        // 渲染option列表
        this.types = res.data.data;
      });
    },
  },
  mounted() {
    // 当前电影的id  this.form.id 获取电影详情
    httpApi.movieApi.queryById({ id: this.form.id }).then((res) => {
      this.form = res.data.data;
      this.form.star_actor = this.form.star_actor.split("／");
      this.form.type = this.form.type.split("／");
    });
    // 初始化电影列表类型 更新下拉列表框
    this.initMovieTypes();
  },
};
</script>

<style lang="scss" scoped>
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  display: block;
}
</style>